<template>
  <div class="header">
    <span>模拟服务端节点：</span>
    <el-button :class="currentState1"  @click="triggerPoint(1)">1</el-button>
    <el-button :class="currentState2"  @click="triggerPoint(2)">2</el-button>
    <el-button :class="currentState3"  @click="triggerPoint(3)">3</el-button>
    <el-button :class="currentState4"  @click="triggerPoint(4)">4</el-button>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    methods: {
      triggerPoint(n) {
        this.$router.push('/' + n)
      }
    },
    computed: {
      currentState1 () {
        return this.$store.state.currentState1
      },
      currentState2 () {
        return this.$store.state.currentState2
      },
      currentState3 () {
        return this.$store.state.currentState3
      },
      currentState4 () {
        return this.$store.state.currentState4
      },
    }
  }
</script>

<style lang="scss" scoped>
  .header {
    button {
      margin-left: 5px;
    }
  }
</style>
